<template>
	<view style="width:100vw;height:auto;min-height:100vh;background-color:#333;">
		<fui-loading type="row" v-show="showLoading" :isFixed="true" isMask="true" maskBgColor="rgba(0, 0, 0, 0.6)"
			text="模卡正在生成中,请耐心等待……" rowColor="#FFFFFF" size="18"></fui-loading>
		<view class=""
			:style="{position: 'fixed',zIndex:'1000',top:leftTopMenu.top + 'px',height:leftTopMenu.height + 'px',lineHeight:leftTopMenu.height + 'px',textAlign:'left',paddingLeft:'20rpx'}"
			@click="navBack()">
			<uni-icons type="left" size="26" color="#fff"></uni-icons>
		</view>
		<uniDrawer ref="showRight" mode="right" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view :style="{marginTop:(leftTopMenu.top + leftTopMenu.height) + 'px'}"></view>
				<view style="padding-left:30rpx;padding-right:30rpx;display: flex;align-items: center;" class="flex-js">
					<view style="font-size:26rpx;color:#FFF;line-height:40rpx;">切换黑白背景</view>
					<switch :checked="UserMokaSet.backgroundColor" color="#FFCC33" style="transform:scale(0.7)"
						@change="bgcolorChange" />
				</view>
				<view style="padding-left:30rpx;padding-right:30rpx;display: flex;align-items: center;" class="flex-js">
					<view style="font-size:26rpx;color:#FFF;line-height:40rpx;">生日</view>
					<switch :checked="UserMokaSet.birthShow" color="#FFCC33" style="transform:scale(0.7)"
						@change="birthChange" />
				</view>
				<view style="padding-left:30rpx;padding-right:30rpx;display: flex;align-items: center;" class="flex-js">
					<view style="font-size:26rpx;color:#FFF;line-height:40rpx;">身材信息</view>
					<switch :checked="UserMokaSet.baseShow" color="#FFCC33" style="transform:scale(0.7)"
						@change="baseChange" />
				</view>
			</scroll-view>
		</uniDrawer>

		<view style="padding:20rpx;padding-top:130rpx;padding-bottom: 200rpx;">
			<view :style="{
					margin:'auto', 
					width: mokaTemplate.MokaWidth*mokaTemplate.MokaTempRate+'rpx', 
					height: mokaTemplate.MokaHeight*mokaTemplate.MokaTempRate+'rpx', 
					backgroundColor: mokaTemplate.BackgroundColor, 
					padding: mokaTemplate.MokaPadding*mokaTemplate.MokaTempRate+'rpx', 
					position: 'relative'
				}">

				<view :style="{
						fontSize: mokaTemplate.TitleSize*mokaTemplate.MokaTempRate+'rpx', 
						color: mokaTemplate.TitleColor,position: 'absolute',
						top:mokaTemplate.TitleBoxTop*mokaTemplate.MokaTempRate+'rpx',
						left:mokaTemplate.TitleBoxLeft*mokaTemplate.MokaTempRate+'rpx'
					}">
					{{ UserInfo.NickName }}
				</view>

				<view :style="{
							width: mokaTemplate.TextBoxWidth*mokaTemplate.MokaTempRate+'rpx', 
							height: mokaTemplate.TextBoxHeight*mokaTemplate.MokaTempRate+'rpx',
							backgroundColor: mokaTemplate.TextBoxBackgroundColor, 
							position: 'absolute', 
							top: mokaTemplate.TextBoxTop*mokaTemplate.MokaTempRate + 'rpx', 
							left: mokaTemplate.TextBoxLeft*mokaTemplate.MokaTempRate + 'rpx', 
							zIndex:'9',
							padding:mokaTemplate.TextBoxPadding*mokaTemplate.MokaTempRate+'rpx'
						 }">


					<view :style="{
								paddingLeft: mokaTemplate.TextBoxPaddingLeft*mokaTemplate.MokaTempRate+'rpx',
								paddingTop: mokaTemplate.TextBoxPaddingTop*mokaTemplate.MokaTempRate+'rpx',
								display:mokaTemplate.TextModelType == 1 ? 'flex' : '',    				// 1 横版 2 竖版
								flexWrap:mokaTemplate.TextModelType == 1 ? 'wrap' : '',    				// 1 横版 2 竖版
								justifyContent: mokaTemplate.TextMemoPatternType == 1 ? 'center' : ''
							}
						">

						<view v-for="(itm,idx) in JSON.parse(mokaTemplate.TextJson).memo" :key="idx" v-if="itm.checked"
							:style="{
									fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate  + 'rpx',
									color: mokaTemplate.MemoColor, 
									marginBottom:mokaTemplate.TextMarginBottom*mokaTemplate.MokaTempRate+'rpx',
									marginRight:mokaTemplate.TextMarginRight*mokaTemplate.MokaTempRate+'rpx',
								}">
							<view :style="{lineHeight:mokaTemplate.TextLineHeight*mokaTemplate.MokaTempRate+'rpx'}">
								<text :style="{
											display:mokaTemplate.TextArrangeType == 2 ? 'block' : ''
										}">
									{{ itm.key }}{{ mokaTemplate.TextEnShow == 1 ? itm.en : ''}}
								</text>
								<text :style="{
											color: mokaTemplate.TitleColor,
										}">
									{{ itm.value }}
								</text>
							</view>

						</view>
					</view>




					<!-- <view :style="{display: 'flex',flexWrap: 'wrap',lineHeight:mokaTemplate.TextLineHeight*mokaTemplate.MokaTempRate + 'rpx',paddingTop:mokaTemplate.TextBoxPaddingTop*mokaTemplate.MokaTempRate + 'rpx',paddingLeft:mokaTemplate.TextBoxPaddingLeft*mokaTemplate.MokaTempRate + 'rpx',}"  v-if="UserInfo.UserBaseinfo">
						
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.baseShow">
							身高：<text :style="{color:mokaTemplate.TitleColor}">{{ JSON.parse(UserInfo.UserBaseinfo). shengao }}</text>cm
						</view>
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.baseShow">
							体重：<text :style="{color:mokaTemplate.TitleColor}">{{ JSON.parse(UserInfo.UserBaseinfo). tizhong }}</text>kg
						</view> 
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.baseShow">
							鞋码：<text :style="{color:mokaTemplate.TitleColor}">{{ JSON.parse(UserInfo.UserBaseinfo). jiaoma }}</text>
						</view>
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.baseShow">
							胸围：<text :style="{color:mokaTemplate.TitleColor}">{{ JSON.parse(UserInfo.UserBaseinfo). sanwei[0] }}{{ JSON.parse(UserInfo.UserBaseinfo). sanwei[1] }}</text>
						</view>
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.baseShow">
							腰围：<text :style="{color:mokaTemplate.TitleColor}">{{ JSON.parse(UserInfo.UserBaseinfo). sanwei[2] }}</text>
						</view>
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.baseShow">
							臀围：<text :style="{color:mokaTemplate.TitleColor}">{{ JSON.parse(UserInfo.UserBaseinfo). sanwei[3] }}</text>
						</view>
						<view :style="{fontSize: mokaTemplate.MemoSize*mokaTemplate.MokaTempRate+'rpx', color: mokaTemplate.MemoColor,width:mokaTemplate.TextWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.TextHeight*mokaTemplate.MokaTempRate+'rpx'}" v-if="UserMokaSet.birthShow">
							生日：<text :style="{color:mokaTemplate.TitleColor}">{{ UserInfo.UserBirth }}</text>
						</view>
					</view> -->

				</view>

				<view
					:style="[{width:mokaTemplate.ErcodeWidth*mokaTemplate.MokaTempRate+'rpx',height:mokaTemplate.ErcodeHeight*mokaTemplate.MokaTempRate+'rpx',background:'#CCC'},{position: 'absolute', top: mokaTemplate.ErcodeTop*mokaTemplate.MokaTempRate+'rpx',left: mokaTemplate.ErcodeLeft*mokaTemplate.MokaTempRate+'rpx',zIndex: '99'}]">
					<image :src="UserInfo.WeixinQrcode" style="width: 100%;height: 100%;" mode="widthFix"></image>
				</view>

				<view
					:style="{position: 'absolute', width: mokaTemplate.PicBoxWidth*mokaTemplate.MokaTempRate+'rpx', height: mokaTemplate.PicBoxHeight*mokaTemplate.MokaTempRate+'rpx', top: mokaTemplate.PicBoxTop*mokaTemplate.MokaTempRate+'rpx', left: mokaTemplate.PicBoxLeft*mokaTemplate.MokaTempRate+'rpx', backgroundColor: mokaTemplate.PicBoxBackgroundColor}">

					<view v-for="(itm, idx) in mokaTemplate.TemplatePics" :key="idx" :style="{
							width: itm.PicWidth*mokaTemplate.MokaTempRate+'rpx', 
							height: itm.PicHeight*mokaTemplate.MokaTempRate+'rpx', 
							position: 'absolute', 
							top: itm.PicTop*mokaTemplate.MokaTempRate+'rpx', 
							left: itm.PicLeft*mokaTemplate.MokaTempRate+'rpx', 
							backgroundColor: '#FFFFCC'
						}" @touchstart="touchStart($event, idx)" @touchmove="touchMove($event, idx)" @touchend="touchEnd($event)"
						:id="'images' + idx" :class="imageIndex[0].index == idx && isIndex ? 'image-active' :''">
						<view v-if="showChangPicBtn == idx" class="tihuanBtn" @click="changPic(idx)">替换</view>

						<movable-area scale-area style="width:100%;height:100%; overflow: hidden;">
							<movable-view scale :x="0" :y="0" direction="all" @change="onChange($event, idx)"
								:style="{width:'100%', height: mokaTemplate.TemplatePics[idx].imgheight + 'rpx'}">
								<image :src="itm.PicSrc" mode="widthFix" @load="imageLoad($event, idx)"
									:style="{width:'100%', display: 'block' }" @click="changPicBtn(idx)">
							</movable-view>
						</movable-area>
						<!--  -->
					</view>
				</view>
			</view>
		</view>

		<view class="actBottom">
			<!-- <view style="width:180rpx;" class="flex-js">
				<fui-icon name="arrowleft" color="#999" size="30"></fui-icon>
				<view style="height:35rpx;line-height:35rpx;font-size:12rpx;">拖拽挪动 单击换图</view>
			</view> -->
			<!-- <view style="width:300rpx;padding:8rpx;margin-left:20rpx;">
				<fui-slider color="#FF3300" @change="onChange" @changing="onChanging"></fui-slider>
			</view> -->
			<!-- <view class="flex-js"
				style="padding:30rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="font-size:24rpx;color:#FFF;line-height:40rpx;">切换黑白背景</view>
				<switch :checked="UserMokaSet.backgroundColor" color="#FFCC33" style="transform:scale(0.7)"
					@change="bgcolorChange" />
			</view> -->
			<view style="width:80vw;margin:auto;" class="flex-js">
				<button @click="showDrawer" class="editBtn">编辑</button>
				<button @click="saveMoka" class="makeBtn">生成模卡</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDrawer from '@/firstui/uni-drawer/components/uni-drawer/uni-drawer.vue'
	import {
		getTemplate,
		getSaveMoka,
		getMakeMoka
	} from '@/api/moka.js'
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				// drawerShow: false,
				showLoading: false,
				showRight: false,
				showLeft: false,
				itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
				TargetUserID: 0,
				mokaTemplateID: 0,
				mokaTemplate: {},
				mokaTempRate: 0.8,
				tempFiles: [],
				mokaImages: [],
				mokaImageLocal: [],
				otherID: 0,
				UserMokaSet: {
					backgroundColor: true,
					birthShow: true,
					baseShow: true,
					erCodeShow: true
				},
				// 左上胶囊按钮信息
				leftTopMenu: {},
				UserInfo: [],
				valueColor: '#000000',
				showChangPicBtn: -1,


				// 滑动切换照片数据
				isIndex: false,
				topLeft: [],
				imageIndex: null,
				elementOneIndex: null,
			};
		},
		onLoad(option) {
			this.leftTopMenu = uni.getMenuButtonBoundingClientRect()
			this.TargetUserID = option.otherID;
			this.mokaTemplateID = option.mokaTemplateID;
			this.targetUser = option.targetUser;
			this.tempFiles = uni.getStorageSync("tempMoka");

			// console.log(this.mokaTemplateID, this.tempMoka);
			this.onGetMokaTemplate();
		},
		onShow() {
			this.showLoading = false;
		},
		methods: {
			touchStart(event, index) {
				this.isMove = false;
				// 接收第一张照片 index
				this.elementOneIndex = index;

				// 第一张照片关闭边框
				this.isIndex = false;

			},
			touchMove(event) {

				// 鼠标移动的x，y坐标
				var clientX = event.changedTouches[0].clientX;
				var clientY = event.changedTouches[0].clientY;

				var top = this.topLeft[this.elementOneIndex].top
				var bottom = this.topLeft[this.elementOneIndex].bottom
				var left = this.topLeft[this.elementOneIndex].left
				var right = this.topLeft[this.elementOneIndex].right

				if (clientX <= left || clientY <= top || clientX >= right || clientY >= bottom) this.isMove = true;

				if (!this.isMove) return;

				// console.log('clientX' ,clientX)
				// console.log('clientY' ,clientY)
				// 筛选符合条件图片的 index
				this.imageIndex = this.topLeft.filter((item, index) => clientX >= item.left && clientY >= item.top &&
					clientX <= item.right && clientY <= item.bottom)
				// console.log('this.imageIndex' ,this.imageIndex)
				// return;
				// 添加边框
				if (this.elementOneIndex == this.imageIndex[0].index) {
					this.isIndex = false;
				} else {
					this.isIndex = true;
				}

			},
			touchEnd(event) {
				if (!this.isMove) return;
				var ObjPicSrc = this.tempFiles[this.elementOneIndex].tempFilePath;
				this.tempFiles[this.elementOneIndex].tempFilePath = this.tempFiles[this.imageIndex[0].index].tempFilePath;
				this.tempFiles[this.imageIndex[0].index].tempFilePath = ObjPicSrc;
				uni.setStorageSync("tempMoka", this.tempFiles);

				this.tempFiles.forEach((item, index) => {
					this.mokaTemplate.TemplatePics[index]['PicSrc'] = item.tempFilePath;
				})
				// this.mokaTemplate.TemplatePics[index]['PicSrc'] = this.tempFiles[index].tempFilePath

				this.isIndex = false;
				this.mokaTemplate.TemplatePics[this.elementOneIndex].local.x = 0;
				this.mokaTemplate.TemplatePics[this.elementOneIndex].local.y = 0;
				this.mokaTemplate.TemplatePics[this.imageIndex[0].index].local.x = 0;
				this.mokaTemplate.TemplatePics[this.imageIndex[0].index].local.y = 0;

				// this.textImage1 = this.mokaTemplate.TemplatePics[1].PicSrc;
				// this.textImage2 = this.mokaTemplate.TemplatePics[2].PicSrc;
				// this.mokaTemplate.TemplatePics[index]['PicSrc'] = this.tempFiles[index].tempFilePath;
			},
			changPicBtn(index) {
				this.showChangPic = !this.showChangPic
				if (this.showChangPic == true) {
					this.showChangPicBtn = index;
				} else {
					this.showChangPicBtn = -1;
				}
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			bgcolorChange(e) {
				// console.log('切换黑白北京', e)
				// if (!e.detail.value) {
				// 	// 背景颜色
				// 	this.mokaTemplate.BackgroundColor = '#000000';  		// #FFFFFF
				// 	// title 值颜色
				// 	this.mokaTemplate.TitleColor = '#FFFFFF';       		// #000000
				// 	// value 值颜色
				// 	this.valueColor = '#FFFFFF'								// #000000
				// 	// 文字背景颜色
				// 	this.mokaTemplate.TextBoxBackgroundColor = '#000000'	// #000000

				// } else {
				// 	// 背景颜色
				// 	this.mokaTemplate.BackgroundColor = '#FFFFFF';  		// #FFFFFF
				// 	// title 值颜色
				// 	this.mokaTemplate.TitleColor = '#000000';       		// #000000
				// 	// value 值颜色
				// 	this.valueColor = '#000000'								// #000000
				// 	// 文字背景颜色
				// 	this.mokaTemplate.TextBoxBackgroundColor = '#FFFFFF'	// #FFFFFF
				// }

				if (this.mokaTemplate.BackgroundColor == '#FFFFFF') {
					this.mokaTemplate.BackgroundColor = '#000000'
					this.UserMokaSet.backgroundColor = !this.UserMokaSet.backgroundColor
					this.mokaTemplate.TitleColor = '#FFFFFF'
				} else if (this.mokaTemplate.BackgroundColor == '#000000') {
					this.mokaTemplate.BackgroundColor = '#FFFFFF'
					this.UserMokaSet.backgroundColor = !this.UserMokaSet.backgroundColor
					this.mokaTemplate.TitleColor = '#000000'
				}

			},
			birthChange(event) {
				this.UserMokaSet.birthShow = event.detail.value
			},
			baseChange(event) {
				this.UserMokaSet.baseShow = event.detail.value
			},

			//调用此方法显示抽屉
			showDrawer(type) {
				this.$refs.showRight.open();
				// this.drawerShow = true
			},
			closeDrawer(type) {
				this.$refs.showRight.close();
				// this.drawerShow = false
			},

			onGetMokaTemplate() {

				// this.$httpost('/Moka/UserInfo', {
				// 	targetUser: this.targetUser
				// }).then(res => {
				// 	console.log('Template', res);
				// 	if (res.code == 200) {
				// 		this.mokaTemplate = res.data;

				// 		this.mokaTemplate.TemplatePics.forEach((val,index) => {
				// 			this.mokaTemplate.TemplatePics[index]['PicSrc'] = this.tempFiles[index].tempFilePath;
				// 			this.mokaTemplate.TemplatePics[index]['local'] = {source:"touch",x:0,y:0};
				// 		});

				// 		console.log(this.mokaTemplate);
				// 	}

				// });
				getTemplate({
					OtherID: this.TargetUserID,
					TemplateID: this.mokaTemplateID,
				}).then(res => {
					// console.log('Template', res);
					if (res.code == 200) {
						this.mokaTemplate = res.data.MokaTemplate;
						this.UserInfo = res.data.MokaUserInfo;
						this.mokaTemplate.TemplatePics.forEach((val, index) => {
							this.mokaTemplate.TemplatePics[index]['PicSrc'] = this.tempFiles[index]
								.tempFilePath;
							this.mokaTemplate.TemplatePics[index]['local'] = {
								source: "touch",
								x: 0,
								y: 0
							};

							setTimeout(() => {
								this.mokaTemplate.TemplatePics.forEach((item, index) => {
									var query = uni.createSelectorQuery().in(this);
									query.select(`#images${index}`).boundingClientRect(
										data => {
											// return;
											this.topLeft.push({
												top: data.top,
												left: data.left,
												bottom: data.bottom,
												right: data.right,
												index
											})
											// console.log('元素获取', data)	
										}).exec();
								})
							}, 1000)
						});

						// console.log(this.mokaTemplate);
					}

				});
			},
			ontestChange(e) {
				// console.log(e)
			},
			changPic(index) {
				let _that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						// console.log(res)
						_that.setPics(index, res.tempFiles)
					}
				})
			},
			setPics(index, tempFiles) {
				this.tempFiles.splice(index, 1, tempFiles[0]);
				uni.setStorageSync("tempMoka", this.tempFiles);

				this.mokaTemplate.TemplatePics[index]['PicSrc'] = this.tempFiles[index].tempFilePath;
			},
			imageLoad(e, index) {
				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				// const { width, height } = e.detail;
				// this.mokaTemplate.TemplatePics[index]['imgheight'] = (height / width) * 270; // 高度 = 原始高度 / 原始宽度 * 100
				// console.log(e)
				// console.log(' this.mokaTemplate.mokaTempRate' ,  this.mokaTemplate.MokaTempRate)
				// return;

				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				const {
					width,
					height
				} = e.detail;
				const initW = this.mokaTemplate.TemplatePics[index]['PicWidth'] * this.mokaTemplate.MokaTempRate;
				const initH = this.mokaTemplate.TemplatePics[index]['PicHeight'] * this.mokaTemplate.MokaTempRate;

				// 高度 = 原始高度 / 原始宽度 * initW
				this.mokaTemplate.TemplatePics[index]['imgheight'] = (height / width) * initW;

				// console.log('height / width) * initW' , this.mokaTemplate.TemplatePics[index]['imgheight'])
			},
			onChange(e, idx) {
				// console.log(idx, e)

				this.mokaTemplate.TemplatePics[idx]['local'] = e.detail;

				// console.log('mokaTemplatexxxxxxxxxxx', this.mokaTemplate);
			},
			uploadImage(tempFilePaths, i) {
				return new Promise((reslove, reject) => {
					uni.uploadFile({
						url: this.$imgUpload + 'Moka&type=image', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[i].tempFilePath,
						name: "file",
						// files: tempFilePaths,
						formData: {},
						success: (uploadFileRes) => {
							// console.log('uploadFileRes', uploadFileRes);
							reslove(JSON.parse(uploadFileRes.data))
							// let ResData = ;
							// console.log('mokaImages', this.mokaImages)
							// console.log(this.mokaImages.length, tempFilePaths.length)
						},
						fail: (err) => {
							reject(err)
						}
					});
				})
			},
			saveMoka() {
				this.mokaImages = [];
				this.mokaImageLocal = [];

				this.showLoading = true;
				// console.log('UserMokaSet', this.UserMokaSet);

				getSaveMoka({
					templateID: this.mokaTemplateID,
					TargetUserID: this.TargetUserID,
					UserMokaSet: this.UserMokaSet
				}).then(async res => {

					let a = -1;
					let b = -1;
					let c = a - b - b;
					// console.log('SaveMoka', c);


					if (res.code == 200) {

						let UserMokaID = res.data;

						const tempFilePaths = this.tempFiles;
						// console.log('tempFilePaths', tempFilePaths);

						for (var i = 0; i < tempFilePaths.length; i++) {

							this.mokaImageLocal.push(this.mokaTemplate.TemplatePics[i]['local']);
							// console.log('报错信息',this.mokaTemplate.TemplatePics[i]['local'])

							try {
								let ResData = await this.uploadImage(tempFilePaths, i)
								this.mokaImages.push(this.$baseUrl + ResData.fileName);

							} catch (err) {
								this.showLoading = false;
								// console.log('上传失败', err)
							}
						}



						if (this.mokaImages.length == tempFilePaths.length) {

							getMakeMoka({
								UserMokaID: UserMokaID,
								MokaImages: this.mokaImages,
								MokaImageLocal: this.mokaImageLocal
							}).then(MakeMokaRes => {

								// console.log('MakeMokaRes', MakeMokaRes)
								if (MakeMokaRes.code == 200) {
									uni.navigateTo({
										url: '/moka/pages/mokaResult?mokaid=' + MakeMokaRes
											.data.MokaID
									})
								}
							}).catch(err => {
								this.showLoading = false;
								uni.showToast({
									title: '上传失败！',
									icon: 'errr'
								})
								// console.log(err)
							})
						}

					}

				}).catch(err => {
					this.showLoading = false;
					// console.log(err)
				})
			},
			// saveMoka() {
			// 	this.mokaImages = [];
			// 	this.mokaImageLocal = [];

			// 	this.showLoading = true;
			// 	this.$httpost('/Moka/SaveMoka', {
			// 		templateID: this.mokaTemplateID,
			// 		TargetUserID: this.TargetUserID,
			// 		UserMokaSet: this.UserMokaSet
			// 	}).then(res => {

			// 		let a = -1;
			// 		let b = -1;
			// 		let c = a - b - b;
			// 		console.log('SaveMoka', c);


			// 		if (res.code == 200) {

			// 			let UserMokaID = res.data;

			// 			const tempFilePaths =  this.tempFiles;
			// 			console.log('tempFilePaths', tempFilePaths);

			// 			for (var i = 0; i < tempFilePaths.length; i++) {

			// 				this.mokaImageLocal.push(this.mokaTemplate.TemplatePics[i]['local']);

			// 				uni.uploadFile({
			// 					url:  this.$imgUpload + 'Moka&type=image', //仅为示例，非真实的接口地址
			// 					filePath: tempFilePaths[i].tempFilePath,
			// 					name: "file",
			// 					// files: tempFilePaths,
			// 					formData: {},
			// 					success: (uploadFileRes) => {
			// 						console.log('uploadFileRes', uploadFileRes);

			// 						let ResData = JSON.parse(uploadFileRes.data);

			// 						this.mokaImages.push(this.$baseUrl + ResData.fileName);

			// 						console.log('mokaImages', this.mokaImages)
			// 						console.log(this.mokaImages.length, tempFilePaths.length)



			// 						if (this.mokaImages.length == tempFilePaths.length) {

			// 							this.$httpost('/Moka/MakeMoka', {
			// 								UserMokaID: UserMokaID,
			// 								MokaImages: this.mokaImages,
			// 								MokaImageLocal: this.mokaImageLocal
			// 							}).then(MakeMokaRes => {
			// 								this.showLoading = false;
			// 								console.log('MakeMokaRes', MakeMokaRes)
			// 								if (MakeMokaRes.code == 200) {
			// 									uni.navigateTo({
			// 										url: '/moka/pages/mokaResult?mokaid='+MakeMokaRes.data.MokaID
			// 									})
			// 								}
			// 							}).catch(err => {
			// 								this.showLoading = false;
			// 								console.log(err)
			// 							})
			// 						}
			// 					},
			// 					fail: (err) => {
			// 						this.showLoading = false;
			// 						console.log('上传失败', err)
			// 					}
			// 				});	

			// 			}						

			// 		}

			// 	}).catch(err => {
			// 		this.showLoading = false;
			// 		console.log(err)
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	/* 自定义内容区样式需自行控制 */
	.fui-scroll__view {
		width: 520rpx;
		flex: 1;
		overflow: hidden;
	}

	.actBottom {
		position: fixed;
		z-index: 500;
		bottom: 0rpx;
		height: 100rpx;
		width: calc(100% - 20rpx);
		background-color: rgba(0, 0, 0, 0.7);
		padding: 10rpx;
	}

	.editBtn {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		width: 160rpx;
		border: 1rpx solid #FFDD00;
		background: none;
		margin-top: 20rpx;
		color: #FFF
	}

	.makeBtn {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		width: 160rpx;
		margin-top: 20rpx;
		background-color: #FFDD00;
	}

	.drawerBox * {
		font-size: 12rpx;
	}

	.tihuanBtn {
		position: absolute;
		z-index: 500;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 70rpx;
		height: 70rpx;
		background: #FFDD00;
		border: 3rpx solid rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
		color: #000;
		text-align: center;
		font-size: 20rpx;
		line-height: 70rpx;
		margin: auto;
	}

	.image-active {
		border: 2rpx solid #ffeb0b;
		box-sizing: border-box;
	}
</style>